<template>
	<view>
		<view class="comment-top">
			<view class="comment-left">
				共 {{total}} 条评论
			</view>
			<view class="comment-right" @click="handleComment" v-show="config.isComment == true" open-type="getUserInfo" >
				<view class="comment-right-text" style="padding:0 20rpx">
					评论
				</view>
				<image src="../../static/images/newIcon/icon/edit.png" mode="" style="width: 40rpx;height: 40rpx;">
				</image>
			</view>
			<!-- <view class="comment-right" v-show="config.isComment == true">
				<button class=" comment-right-text" style="padding:0 20rpx" @click="handleComment"
					open-type="getUserInfo">
					评论
				</button>
			</view> -->

		</view>
		<view v-show="config.isComment == true">
			<view class="comment-content" v-for="(item,index) in list" :key="index" v-show="list.length > 0">
				<view style="display: flex;">
					<view class="content-img">
						<image :src="coverList[index]" mode="" style="width: 59rpx;height: 59rpx;border-radius: 50%;">
						</image>
					</view>
					<view class="content-center">
						<view class="content-center-top">
							{{item.name}} {{item.time}}
						</view>
						<view class="content-center-bottom">
							{{item.data}}
						</view>
					</view>
				</view>

				<view class="dianzan">
					<!-- isLike ==1 已点赞，2未点赞 -->
					<view @click="handleDianzan(item)">
						<image class="dianzan-img" src="../../static/images/newIcon/icon/dianzan.png" mode=""
							style="width: 40rpx;height: 40rpx;" v-if="item.isLike == 2"></image>
						<image class="dianzan-img" src="../../static/images/newIcon/icon/dianzan-active.png" mode=""
							style="width: 40rpx;height: 40rpx;" v-if="item.isLike == 1"></image>
					</view>

					<view class="dianzan-text">
						{{item.likeCount}}
					</view>
				</view>

			</view>
			<view class="no-comment" v-show="total == 0">
				暂无评论
			</view>
		</view>
		<view class="no-comment" v-show="config.isComment == false">
			该活动评论功能暂未开启
		</view>

		<uniPopup ref="popups" type="bottom" :maskClick="false" v-show="config.isComment == true">
			<view class="popup-text">
				<textarea v-model="commentText" placeholder="请输入" style="width: 100%;" />
			</view>
			<view class="popup-btn">
				<button type="default" class="popup-item-btn" style="color: #333333;" @click="handleCancel">取消</button>
				<button type="default" class="popup-item-btn btn-color" @click="handleSubmit">确定</button>
			</view>
		</uniPopup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				total: 0,
				current: 1,
				pages: 1,
				list: [],
				more: 'more',
				commentText: '',
				activityId: null,
				coverList: [],
				config: {},
				rawData: {}, //当前登录者的信息
				avatarUrl: ''
			}
		},
		// onLoad: function() {
		// 	// 查看是否授权
		// 	uni.authorize({
		// 		scope: "scope.scope.userInfo",
		// 		success(res) {
		// 			console.log(res,'授权成功');
		// 		},
		// 		fail() {
		// 			uni.openSetting({
		// 				success(authSetting) {
		// 					console.log(authSetting);
		// 				}
		// 			})
		// 		}
		// 	})
		// },
		methods: {
			getActivityInfo(id) {
				this.rawData = null
				console.log(id)
				this.$http.post('vx/activity/info', {
					id: id
				}).then(
					res => {
						if (res.code === 10000) {
							console.log(res.data)
							this.config = res.data.config
							if (res.data.config.isComment) {
								this.getCommentList(id)
							}
						}
					})
			},
			getCommentList(id, isMore) {
				this.activityId = id
				console.log(id)
				//加一页
				if (isMore && this.pages > this.current) {
					this.current++
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$http.post('vx/activity/discussList', {
					activityId: id,
				}).then(
					res => {
						uni.stopPullDownRefresh();
						if (res.code == 10000) {
							this.total = res.data.total
							console.log(this.total)
							let list = res.data.list || []
							this.pages = res.data.total / 10 + 1
							this.coverList = []
							list && list.forEach((x, index) => {
								// this.coverList.push('../../static/images/default.png')
								// this.downLoadFile(x.cover, index);
								if (!x.cover) {
									this.coverList.push('../../static/images/default.png')
								} else {
									this.coverList.push(x.cover)
								}
							})
							console.log(isMore)
							if (isMore) {
								if (this.pages > this.current) {
									this.list = this.list.concat(list)
								} else {
									this.more = 'nomore'
								}

							} else {
								this.list = list
							}
						}
					}
				)

			},

			handleComment() {
				let that = this
				console.log(!that.rawData)
			
				if (!that.rawData) {
					wx.getUserInfo({
						success: function(res) {
							console.log('1111111')
							that.rawData = JSON.parse(res.rawData)
							console.log(that.rawData, 2222)
							that.$refs.popups.open()

						},
						complete: function(res) {
							console.log(res)
						}
					})
				} else {
					that.$refs.popups.open()
				}
			},

			handleCancel() {
				this.commentText = ''
				this.$refs.popups.close()
			},
			downLoadFile(id, index) {
				this.$http.post('common/file/download', {
					id: id
				}).then(res => {
					if (res.code == 10000) {
						this.coverList.splice(index, 1, res.data.fileData)
						console.log(this.coverList)
					} else {

					}
				})
			},
			handleSubmit() {

				console.log(this.commentText.trim())
				if (this.commentText.trim() == '') {
					uni.showModal({
						title: '请填写评论内容后再提交',
						showCancel: false,
					})
				} else {
					let values = {
						activityId: this.activityId,
						data: this.commentText,
						vxCover: this.rawData.avatarUrl
					}
					this.$http.post('vx/activity/discuss', values).then(res => {
						if (res.code == 10000) {
							uni.showModal({
								title: "提交成功",
								showCancel: false,
							})
							this.handleCancel()
							this.getCommentList(this.activityId)
						} else {
							uni.showModal({
								title: res.msg,
								showCancel: false,

							})
						}
					})

				}
			},
			handleDianzan(item) {
				let values = {
					discussId: item.discussId,
					activityId: this.activityId,
					like: item.isLike == 2 ? 1 : 2
				}
				this.$http.post('vx/activity/like', values).then(res => {
					if (res.code == 10000) {
						this.getCommentList(this.activityId)
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.comment-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 40rpx;
		margin-bottom: 20rpx;
	}

	.comment-left {
		color: #333333;
	}

	.comment-right {
		display: flex;
		vertical-align: middle;

		.comment-right-text {
			font-size: 0.8em;
			color: #FFB049;
			// color: #333333;
			// margin-right: 20rpx;
		}
	}

	.comment-content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.content-img {
		display: inline-block;
		margin-right: 40rpx;

	}

	.content-center {
		width: 80%;
		vertical-align: top;
		display: inline-block;
	}

	.content-center-top {
		width: 100%;
		color: #939393;
		font-size: 0.6em;
		margin-bottom: 10rpx;
	}

	.content-center-bottom {
		color: #535353;
		margin-bottom: 20rpx;
	}

	.dianzan {
		// display: flex;
		// align-items: center;
		text-align: center;
	}

	.dianzan-text {
		color: #7C7C7C;
		font-size: 0.6em;

	}

	.popup-text {
		background-color: #fff;
		padding: 20rpx;
		color: #939393;
	}

	.popup-btn {
		background-color: #fff;
		text-align: right;
	}

	.popup-item-btn {
		display: inline-block;
		width: 25%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		// border-radius: 10rpx;
		color: #FFFFFF;
		// margin: 40rpx 0;
	}

	.btn-color {
		background: #108EE9;
	}

	.no-comment {
		text-align: center;
		color: #939393;
		padding: 40rpx 0;
	}
</style>
